<template>
	<view>
		<block v-for="(item, index) in list_data" :key="index" v-if="getMinToMax(index)">
			<view class="bg-white margin-top padding radius zaiui-trends">
			<!--用户信息-->
			<view class="cu-list menu-avatar">
				<view class="cu-item">
					<view class="cu-avatar round" :style="[{ backgroundImage: 'url(' + (item.seller ? item.seller.avatar : '') + ')' }]"
						@tap="listTap('userTap', item, index)" />
					<view class="content" @tap="listTap('userTap', item, index)">
						<view class="text-black">
							<view class="text-cut">{{ item.seller ? item.seller.name : "匿名" }}</view>
						</view>
						<view class="text-sm flex">
							<text>{{ item.time }}</text>
						</view>
					</view>
					<view class="action">
						<button class="cu-btn sm line-red" @tap="listTap('viewBtnTap', item, index)" v-if="viewBtn">
							<text class="cuIcon-goods" />
							<text class="margin-left-xs">看TA</text>
						</button>

						<button class="cu-btn sm" :class="item.seller.followed ? 'bg-red' : 'line-red'"
							@tap="listTap('followTap', item, index)" v-else>
							<text class="cuIcon-add" v-if="!item.seller.followed"></text>
							<text class="margin-left-xs" v-if="!item.seller.followed">关注</text>
							<text v-if="item.seller.followed">已关注</text>
						</button>
					</view>
				</view>
			</view>

			<!--内容-->
			<view class="margin-tb text-black zaiui-text-content" @tap="listTap('contentTap', item, index)">
				<text v-html="item.description"></text>
				<text class="text-blue margin-left-xs" v-if="item.text_btn">
					<text>查看全文</text>
					<text class="cuIcon-right" />
				</text>
				<!-- 价格信息 - 仅闲置商品显示 -->
				<view class="flex items-center margin-top-sm" v-if="item.price">
					<text class="text-red font-bold text-lg">¥{{ item.price.current }}</text>
					<text class="text-gray text-sm line-through margin-left-sm">¥{{ item.price.original }}</text>
				</view>
			</view>


				<!-- #ifndef APP-PLUS -->
				<view class="zaiui-video-box" v-if="item.video">
					<video class="video-view" :src="item.video" @error="videoErrorCallback" />
				</view>
				<!-- #endif -->

				<!-- #ifdef APP-PLUS -->
				<view class="zaiui-video-box" v-if="item.video">
					<video-render :isCover="item.cover" :isSrc="item.video" :isNum="(index + 1)" />
				</view>
				<!-- #endif -->

				<view class="zaiui-img-grid-col" v-if="item.images.length > 0">
					<!--单图-->
					<view class="one-img" v-if="item.images.length == 1" @tap="imgTap(item.images[0].url, item.images, 0)">
						<view class="img-grid" :style="[{ backgroundImage: 'url(' + item.images[0].url + ')' }]" />
					</view>

					<!--两图-->
					<view class="grid col-2" v-if="item.images.length == 2">
						<block v-for="(items, indexs) in item.images" :key="indexs">
							<view class="img-grid-view" @tap="imgTap(items.url, items, indexs)">
								<view class="img-grid" :style="[{ backgroundImage: 'url(' + items.url + ')' }]" />
							</view>
						</block>
					</view>

					<!--多图-->
					<view class="grid col-3" v-if="item.images.length > 2">
						<block v-for="(items, indexs) in item.images" :key="indexs" v-if="indexs < 9">
							<view class="img-grid-view" @tap="imgTap(items.url, items, indexs)">
								<view class="img-grid" :style="[{ backgroundImage: 'url(' + items.url + ')' }]" />
							</view>
						</block>
					</view>
				</view>

				<!--商品规格信息 - 仅闲置商品显示 -->
				<view class="margin-top" v-if="item.attributes">
					<view class="flex flex-wrap">
						<block v-for="(value, key) in item.attributes" :key="key">
							<view class="cu-tag light round-sm margin-right-xs margin-bottom-xs">
								{{ value.key }}: {{ value.value }}
							</view>
						</block>
					</view>
				</view>

				<!--交易方式信息 - 仅闲置商品显示 -->
			<view class="flex items-center margin-top-sm text-sm text-gray" v-if="item.type">
				<text class="cuIcon-location"></text>
				<text class="margin-left-xs">{{ item.type }} · {{ (item.location ? item.location.city + ' ' + item.location.district + '' +  item.location.address : '') }}</text>
			</view>

				<!--话题-->
				<view class="cu-tag light bg-red round margin-top" v-if="item.category"
					@tap="listTap('talkTap', item, index)">
					<text class="cuIcon-creativefill"></text>
					<text class="margin-left-xs">{{ item.category.first }} {{ item.category.second }}</text>
				</view>

				<!--操作-->
				<view class="flex p-xs zaiui-footer-tool">
					<view class="flex-sub" @tap="listTap('forwardTap', item, index)">
						<text class="cuIcon-forward icon"></text>
						<text class="margin-left-xs">分享</text>
					</view>
					<view class="flex-twice text-right">
						<text class="text-right margin-right-lg" @tap="listTap('commentTap', item, index)">
							<text class="cuIcon-comment icon" />
							<text class="margin-left-xs">{{ item.comments.total }}</text>
						</text>
						<text class="text-right" :class="item.liked ? 'text-red' : ''"
							@tap="listTap('appreciateTap', item, index)">
							<text class="cuIcon-appreciate icon" />
							<text class="margin-left-xs">{{ item.popularity.likes }}</text>
						</text>
					</view>
				</view>
			</view>
		</block>

		<!-- 加载更多 -->
		<view class="flex justify-center items-center padding margin-top">
			<text class="text-sm text-gray" v-if="loading">加载中...</text>
			<text class="text-sm text-gray" v-else-if="finished">没有更多了</text>
			<text class="text-sm text-gray" v-else @click="onLoadMore">点击加载更多</text>
		</view>
	</view>
</template>

<script>
import videoRender from '@/components/basics/video-render';
import _tool from '@/utils/tools.js';
export default {
	name: 'trends-list',
	components: {
		videoRender
	},
	props: {
		list_data: {
			type: Array,
			default: () => {
				return []
			}
		},
		isMin: {
			type: Number,
			default: 0
		},
		isMax: {
			type: Number,
			default: 0
		},
		viewBtn: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			loading: false,
			finished: false,
			page: 1,
			pageSize: 1
		};
	},
	watch: {
		list_data: {
			handler(newVal) {
				// 避免在初始加载时就判断是否有更多数据
				// 只在非初始加载时（page > 1）进行这个判断
				if (newVal.length < this.pageSize && this.page > 1) {
					this.finished = true;
				}
			},
			immediate: true
		}
	},
	methods: {
		listTap(tap, data, index) {
			// 对于闲置商品（有price字段），点击内容区域跳转到详情页
			if (tap === 'contentTap' && data.price) {
				this.navigateToDetail(data.id);
			} else {
				this.$emit(tap, {
					data,
					index
				});
			}
		},
		imgTap(img, arr, index) {
			this.$emit('imgTap', {
				img,
				arr,
				index
			});
		},
		// 跳转到闲置物品详情页
		navigateToDetail(id) {
			uni.navigateTo({
				url: `/pages/goods/detail?id=${id}`
			});
		},
		onLoadMore() {
			if (this.loading || this.finished) {
				return;
			}

			this.loading = true;
			this.page++;

			// 触发加载更多事件，传递分页参数和回调函数
			this.$emit('loadMore', {
				page: this.page,
				pageSize: this.pageSize,
				callback: (hasMore) => {
					// 更新加载状态
					this.loading = false;
					// 如果没有更多数据，设置完成状态
					if (!hasMore) {
						this.finished = true;
					}
				}
			});
		},
		// 设置加载状态
		setLoading(status) {
			this.loading = status;
		},
		// 设置完成状态
		setFinished(status) {
			this.finished = status;
		},
		// 重置加载更多状态
		resetLoadMore() {
			this.page = 1;
			this.loading = false;
			this.finished = false;
		},
		getMinToMax(index) {
			let isMin = this.isMin, isMax = this.isMax;
			if (isMin == 0 && isMax == 0) {
				return true;
			} else if (isMin > 0 && isMax == 0) {
				if (index >= isMin) {
					return true;
				} else {
					return false;
				}
			} else if (isMin == 0 && isMax > 0) {
				if (index < isMax) {
					return true;
				} else {
					return false;
				}
			} else if (isMin > 0 && isMax > 0) {
				if (index >= isMin && index < isMax) {
					return true;
				} else {
					return false;
				}
			} else {
				return false;
			}
		},
		videoErrorCallback(e) {
			uni.showToast({
				title: e.target.errMsg,
				duration: 2000,
				icon: 'none'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.zaiui-trends {
	border-radius: 18.18rpx;

	.cu-list {
		.cu-item {
			padding-right: 0;
			height: 99.99rpx;

			.cu-avatar {
				left: 0;
				width: 81.81rpx;
				height: 81.81rpx;
			}

			.content {
				left: 99.99rpx;
				line-height: 1.5em;
			}

			.action {
				width: 154.54rpx;
				text-align: right;

				.cu-btn {
					&:after {
						border-radius: 18.18rpx;
					}

					.cuIcon-add {
						font-size: 27.27rpx;
					}
				}
			}

			&:after {
				width: 0;
				height: 0;
				border-bottom: 0;
			}
		}
	}

	.zaiui-text-content {
		line-height: 1.6;

		.cuIcon-right {
			position: relative;
			top: 1rpx;
		}

		.margin-top-sm {
			margin-top: 10rpx;
		}
	}

	.zaiui-video-box {
		position: relative;
		width: 100%;

		.video-view {
			width: 100%;
			height: 363.63rpx;
			z-index: 0;
		}
	}

	.zaiui-img-grid-col {
		position: relative;
		width: 100%;

		.one-img {
			position: relative;

			.img-grid {
				width: 100%;
				height: 363.63rpx;
				border-radius: 9.09rpx;
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
			}
		}

		.col-2 {
			.img-grid-view {
				padding: 5.45rpx;

				.img-grid {
					position: relative;
					width: 309.09rpx;
					height: 218.18rpx;
					background-size: cover;
					background-position: center;
					border-radius: 9.09rpx;
				}
			}
		}

		.col-3 {
			.img-grid-view {
				padding: 5.45rpx;

				.img-grid {
					position: relative;
					width: 204.79rpx;
					height: 204.79rpx;
					background-size: cover;
					background-position: center;
					border-radius: 9.09rpx;
				}
			}
		}
	}

	.zaiui-footer-tool {
		margin: 40rpx 0 18.18rpx;

		.margin-right-lg {
			margin-right: 94.54rpx;
		}

		.icon {
			position: relative;
			font-size: 36.36rpx;
			top: 4rpx;
		}
	}

	// 商品规格标签样式
	.flex-wrap {
		flex-wrap: wrap;
	}

	// 价格样式增强
	.text-lg {
		font-size: 36rpx;
	}

	.font-bold {
		font-weight: bold;
	}

	.items-center {
		align-items: center;
	}

	// 线样式
	.line-through {
		text-decoration: line-through;
	}

	// 颜色增强
	.text-red {
		color: #e64340;
	}

	.text-gray {
		color: #999;
	}
}
</style>
